/**
 * @desc: 打印记录
 * @author: fj
 */
import { useState, useEffect, useMemo } from "react";
import HeaderTab from '@/components/CommonTab';
import FormRender from '@/components/FormRender';
import PrintRecordList from "./component/PrintRecordList";
import Typography from "@/views/components/Typography";
import { queryPrinttaskList, queryWarehouseList } from "./service";
import { Alert } from "antd";
import { useResize } from '@/views/hooks/useResize';
import { getFormItem, tabArr } from './config.js';
import moment from "moment";

const PrintRecords = () => {

	//查询条件
	const [query, setQuery] = useState({});

	//打印记录列表
	const [printList, setPrintList] = useState([]);

	//分页数据
	const [pages, setPages] = useState({
		current: 1,
		total: 0,
		pageSize: 20
	});

	//tab页
	const [type, setType] = useState('0');

	//监听变更
	const { el: headerEl, height: headerHeight, onResize } = useResize();

	//仓库列表
	const [warehouseList, setWarehouseList] = useState([]);

	useEffect(() => {
		getWarehouseList();
	}, []);

	//表单数据
	const formArr = useMemo(() => {
		return getFormItem({
			warehouseId: warehouseList
		}, type);
	}, [warehouseList, type])

	useEffect(() => {
		onResize();
		getPrintList();
	}, [query, type, pages.current, pages.pageSize]);

	//获取仓库列表
	const getWarehouseList = async () => {
		const { data = [], success } = await queryWarehouseList();
		if (success) {
			const arr = data.map(v => {
				return {
					label: v.warehouseName,
					value: v.id,
				}
			})
			setWarehouseList(arr);
		}
	};

	//获取打印记录列表
	const getPrintList = async () => {
		START_LOADING();
		const params = {
			...query,
			current: pages.current,
			size: pages.pageSize,
			timeStart: query.printTime ? moment(query.printTime[0]).format("YYYY-MM-DD HH:mm:ss") : undefined,
			timeEnd: query.printTime ? moment(query.printTime[1]).format("YYYY-MM-DD HH:mm:ss") : undefined,
			systemNo: query.systemNos,
			printTime: undefined,
			printPageType: type
		};
		if ((type != '3' && params.printType)) {
			delete params.printType;
		}
		if (['3', '4', '5'].includes(type) && params.warehouseId) {
			delete params.warehouseId;
		}
		const { data = {}, success } = await queryPrinttaskList(params);
		if (success) {
			const { records = [], total = 0 } = data;
			setPrintList(records);
			setPages({
				...pages,
				total
			});
		}
		END_LOADING();
	};

	//表单渲染组件
	const FormRenderProps = {
		query,
		formArr,
		formConfig: {
			name: 'print-record-form',
			style: { margin: '16px 0' }
		},
		clickSearch(val) {
			setPages({
				...pages,
				current: 1
			});
			setQuery(val);
		},
		clickReset() {
			setPages({
				...pages,
				current: 1
			});
			setQuery({});
		},
	}

	//表格的Props
	const listProps = {
		type,
		pages,
		setPages,
		data: printList,
		headerHeight,
	};


	const TabProps = {
		type,
		data: tabArr,
		onChange(val) {
			setType(val);
		}
	}

	return (
		<>
			<HeaderTab {...TabProps} />
			<div ref={headerEl}>
				<Alert
					showIcon
					message={
						<Typography as="s1">
							<div>
								<p>1、批量打印，以及该页面的重新打印，会按打印批次生成任务记录，方便用户查看；</p>
								<p>2、打印的排序按照订单排序打印，顺序固定；</p>
								{!['4', '5'].includes(type) && <p>3、重新打印时，会读取该订单当前最新的快递和快递单号进行打印。</p>}
							</div>
						</Typography>
					}
				/>
				<FormRender {...FormRenderProps} />
			</div>
			<PrintRecordList {...listProps} />
		</>
	);
};

export default PrintRecords;
